<template>
  <getBack top="100px"></getBack>
  <div class="accommodationParticular">
    <div class="carousel">
      <ele-carousel :imgList="imgList"></ele-carousel>
    </div>
    <div class="header">
      <div class="title">
        <span> {{ accommodationInfo.name }}</span>
        <div class="right">
          <img
            v-if="!isSave"
            src="./icon/collection-default.png"
            alt=""
            @click="saveAccommodation(true)"
          />
          <img v-else src="./icon/collection-active.png" alt="" @click="saveAccommodation(false)" />
        </div>
      </div>
      <div class="info">
        <span>房源编号：</span><i>{{ accommodationInfo.accommodation_id }}</i> <span>地址：</span
        ><i>{{ accommodationInfo.location }}</i>
      </div>
      <div class="icon">
        <div class="left">
          <ul>
            <li>
              <img src="./icon/room_hx.png" alt="" />
              <i>{{ accommodationInfo.house_type }}</i>
            </li>
            <li>
              <img src="./icon/room_house.png" alt="" />
              <i>{{ accommodationInfo.rental_type }}</i>
            </li>
            <li>
              <img src="./icon/room_bed.png" alt="" />
              <i>{{ accommodationInfo.bed_ceiling + "张" }}</i>
            </li>
            <li>
              <img src="./icon/room_yzrs.png" alt="" />
              <i>{{ "宜居" + accommodationInfo.people_ceiling + "人" }}</i>
            </li>
          </ul>

          <div class="hot">
            <div class="num">{{ accommodationInfo.view_counts }}</div>
            <div class="font">热度</div>
          </div>

          <img class="hotImg" src="./icon/hot.png" alt="" />
        </div>
        <div class="right">
          <div class="charge">
            <span>{{ "￥ " + accommodationInfo.charge }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <p>
        <span> 关于此房源</span>
      </p>

      <div class="info">
        {{ accommodationInfo.description }}
      </div>

      <div class="service">
        <span>想进一步了解？</span>
        <span @click="showChat">在线聊天</span>
        <img src="./icon/chat.png" alt="" @click="showChat" />
      </div>

      <chatRoom ref="chatRoomRef"></chatRoom>
    </div>

    <div class="facilities">
      <p>设备信息</p>
      <span
        class="info"
        style="margin-right: 20px; font-weight: 500"
        v-for="(item, index) in accommodationInfo.facilities"
        :key="index"
      >
        {{ item }}
      </span>

      <p>其他设备信息</p>
      <span class="info" style="margin-right: 20px; font-weight: 500">
        {{ accommodationInfo.other_facilities }}
      </span>
    </div>

    <div class="surrounding_area">
      <p>周围环境</p>
      <div class="info">
        {{ accommodationInfo.surrounding_area }}
      </div>
    </div>

    <div class="surrounding_area">
      <p>住宿要求</p>
      <div class="info">
        {{ accommodationInfo.requirement }}
      </div>
    </div>

    <div class="appointment">
      <p>立即预约</p>
      <div class="form">
        <el-form label-width="100px" :hide-required-asterisk="true">
          <el-form-item label="入住时间" prop="name">
            <el-date-picker
              v-model="startTime"
              type="date"
              placeholder="请选择入住时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              size="default"
            />
          </el-form-item>

          <el-form-item label="离开时间" prop="avatar">
            <el-date-picker
              v-model="endTime"
              type="date"
              placeholder="请选择离开时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              size="default"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="charge">
        <span>{{ "预计 ￥ " + allPrice ?? "**" }}</span>
      </div>

      <div class="btn">
        <el-button type="warning" @click="save">立即预约</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type GetBack from "@/components/UI-cnps/getBack/getBack.vue"
import getBack from "@/components/UI-cnps/getBack/getBack.vue"
import chatRoom from "@/components/chartRoom/chat-room.vue"
import EleCarousel from "@/components/ele-carousel/ele-carousel.vue"
import type { IBannersItem } from "@/components/ele-carousel/type"
import useAccommodationStore from "@/store/main/acccommodation/acccommodation"
import { localCache } from "@/utils/cacheData"
import { computed, onMounted, reactive, ref } from "vue"
import { InnerNotify } from "@/utils/notificationHint"

let accommodationInfo = localCache.getCache("accommodationInfo")

const imgList: IBannersItem[] = accommodationInfo.images.map((item) => {
  return {
    banner_id: accommodationInfo.id,
    banner_cover: item,
    banner_title: accommodationInfo.name
  }
})

const chatRoomRef = ref<InstanceType<typeof chatRoom>>()

function showChat() {
  // console.log(chatRoomRef.value!.content)
  // 展示抽屉
  chatRoomRef.value!.content = true
}

let startTime = ref("")
let endTime = ref("")

const allPrice = computed(() => {
  const startDate = new Date(startTime.value)
  const endDate = new Date(endTime.value)
  // 计算两个日期之间的毫秒数差
  const timeDiff = endDate.getTime() - startDate.getTime()
  // 将毫秒数差转换为天数差
  const allDay = Math.ceil(timeDiff / (1000 * 60 * 60 * 24))

  const price = accommodationInfo.charge.match(/\d+/)

  const res = price[0] * allDay

  if (res.toString() == "NaN") {
    return "***"
  }
  return price[0] * allDay
})

function cancel() {
  startTime.value = ""
  endTime.value = ""
}

function save() {
  if (!startTime.value || !endTime.value) return
  if (startTime.value == endTime.value) return
  const data = {
    accommodation_id: accommodationInfo.accommodation_id,
    start_time: startTime.value,
    end_time: endTime.value
  }
  accommodationStore.reservation(data, "POST").then((res) => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    })
    InnerNotify({
      message: "预约下单成功！",
      position: "top-right"
    })
  })
}

let isSave = ref<boolean>()

const accommodationStore = useAccommodationStore()

let throttleStartTime: number = new Date().getTime()
const interval = 1000
function saveAccommodation(isSaveAcc: boolean) {
  const nowTime = new Date().getTime()
  const waitTime = interval - (nowTime - throttleStartTime)
  if (waitTime > 0) return

  console.log("请求")

  if (isSaveAcc) {
    accommodationStore
      .saveAccommodation(
        localCache.getCache("accommodationInfo").accommodation_id,
        localCache.getCache("accommodationInfo").user.id,
        "POST"
      )
      .then((res) => {
        // console.log(res)
        isSave.value = true
      })
  } else {
    accommodationStore
      .saveAccommodation(
        localCache.getCache("accommodationInfo").accommodation_id,
        localCache.getCache("accommodationInfo").user.id,
        "DELETE"
      )
      .then((res) => {
        // console.log(res)
        isSave.value = false
      })
  }
  throttleStartTime = nowTime
}
// const { showAnimals } = storeToRefs(useAccommodationStore)
onMounted(() => {
  accommodationStore
    .saveAccommodation(
      localCache.getCache("accommodationInfo").accommodation_id,
      localCache.getCache("accommodationInfo").user.id,
      "GET"
    )
    .then((res) => {
      // console.log(res)
      isSave.value = !!res.data[0].isSave
    })

  // new SYWebSocketClient("ws://localhost:8000/group1").connect("open", "ddd")
})
</script>

<style lang="less" scoped>
.accommodationParticular {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16% 60px 16%;
  .carousel {
    width: 100%;
  }
  .header {
    margin-top: 20px;
    .title {
      font-size: 22px;
      color: #666;
      display: flex;
      justify-content: space-between;
      img {
        width: 30px;
        height: 30px;
        margin-right: 20px;
      }
    }
    .info {
      font-size: 12px;
      margin-top: 10px;
      span {
        color: #ff6c5c;
      }
      i {
        color: #777;
        margin-right: 12px;
      }
    }
    .icon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        ul {
          display: flex;
          margin-top: 20px;
          border-right: 1px solid #ddd;
          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 40px;
            i {
              color: #777;
            }
            img {
              width: 40px;
              margin-bottom: 6px;
            }
          }
        }

        .hot {
          margin: 0 20px;
          .num {
            font-size: 26px;
            color: #aaa;
          }
          .font {
            font-size: 14px;
            color: #ff6c5c;
            text-align: center;
          }
        }
        .hotImg {
          width: 40px;
          height: 40px;
        }
      }
      .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .charge {
          padding: 20px 40px 20px 0;
          font-size: 36px;
          color: #fb8477;
        }
      }
    }
  }
  .content,
  .facilities,
  .surrounding_area,
  .requirement {
    border-bottom: 1px solid #ddd;
    padding-bottom: 30px;
    p {
      color: #555;
      padding: 26px 0;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .info {
      width: 100%;
      line-height: 28px;
      color: #777;
      word-wrap: break-word;

      text-indent: 20px;
    }
    .service {
      margin-top: 40px;
      span:nth-child(1) {
        color: #555;
      }
      span:nth-child(2) {
        color: #ff6c5c;
        cursor: pointer;
        &:hover {
          border-bottom: 1px solid #ff6c5c;
        }
      }
      img {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        transition: all 0.45s;
        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }

  .appointment {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      color: #555;
      font-size: 18px;
      padding: 26px 0;
      text-align: center;
      font-weight: 600;
    }
    .charge {
      padding: 20px 40px 20px 0;
      font-size: 36px;
      color: #fb8477;
    }
    .btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
